<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" media="screen" href="1stylesheets/stylesheet.css">
    <title>Chronoline.js</title>
  </head>

  <body>
    <!-- MAIN CONTENT -->
    <div id="main_content_wrap" class="outer">
      <section id="main_content" class="inner">
      <h2>Monthly Timeline</h2>
      <p>This day-by-day timeline shows off a few features. The events are automatically stacked compactly when they overlap, whether over a single point or a range. Notice how the month labels stick to the edges when you scroll forward and past the first day of the month.</p>
      <div id="target1" class="timeline-tgt">
        <input id="to-today" type="button" value="Go To Today" />
      </div>
      <h2>Quarterly Timeline</h2>
      <p>Timelines can appear on different scales simply by plugging in one of a few existing defaults or by providing custom functions for it. Additionally, there are different options for how you want (or don't want) to highlight today on the timeline. If qtip is used, events also have tooltips.</p>
      <p>This timeline also has dragging enabled, so click, hold, and drag to try that out.</p>
      <div id="target2" class="timeline-tgt"></div>
      <h2>Yearly Timeline</h2>
      <p>Even at a very large scope, chronoline.js still functions. Events are stacked differently because there isn't enough space to place them adjacently anymore.</p>
      <p>And if you didn't notice, the left and right arrows support both single clicks for discrete jumps and click-and-hold to scroll continuously.</p>
      <div id="target3" class="timeline-tgt">
      </div>

<h2>Support</h2>

      </section>
    </div>
    <script type="text/javascript" src="js/jquery.1.7.2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="chronoline/jquery.qtip.min.css" />
    <script type="text/javascript" src="chronoline/jquery.qtip.min.js"></script>

    <script type="text/javascript" src="chronoline/raphael-min.js"></script>

    <link rel="stylesheet" type="text/css" href="chronoline/chronoline.css" />
    <script type="text/javascript" src="chronoline/chronoline.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
      var events = [
      {dates: [new Date(2011, 2, 31)], title: "2011 Season Opener", section: 0},
      {dates: [new Date(2012, 1, 29)], title: "Spring Training Begins", section: 2},
      {dates: [new Date(2012, 3, 5)], title: "Atlanta Braves @ New York Mets Game 1", section: 1},
      {dates: [new Date(2012, 3, 7)], title: "Atlanta Braves @ New York Mets Game 2", section: 1},
      {dates: [new Date(2012, 3, 8)], title: "Atlanta Braves @ New York Mets Game 3", section: 1},
      {dates: [new Date(2012, 3, 9), new Date(2012, 3, 11)], title: "Atlanta Braves @ Houston Astros", section: 1},
      {dates: [new Date(2012, 3, 13), new Date(2012, 3, 15)], title: "Milwaukee Brewers @ Atlanta Braves", section: 1},
      {dates: [new Date(2012, 3, 9), new Date(2012, 3, 11)], title: "Boston Red Sox @ Toronto Blue Jays", section: 1},
      {dates: [new Date(2012, 3, 13), new Date(2012, 3, 15)], title: "Baltimore Orioles @ Toronto Blue Jays", section: 1},
      {dates: [new Date(2012, 3, 17), new Date(2012, 3, 19)], title: "Tampa Bay Rays @ Toronto Blue Jays", section: 1},
      {dates: [new Date(2012, 3, 20), new Date(2012, 3, 23)], title: "Toronto Blue Jays @ Kansas City Royals", section: 1},
      {dates: [new Date(2012, 3, 5)], title: "Opening Day for 12 Teams", section: 1},
      {dates: [new Date(2012, 2, 28)], title: "Seattle Mariners v. Oakland A's", section: 1, description: "Played in Japan!"},
      {dates: [new Date(2012, 4, 18), new Date(2012, 5, 24)], title: "Interleague Play", section: 1},
      {dates: [new Date(2012, 5, 10)], title: "All-Star Game", section: 1},
      {dates: [new Date(2012, 9, 24)], title: "World Series Begins", section: 3}
      ];

      var sections = [
      {dates: [new Date(2011, 2, 31), new Date(2011, 9, 28)], title: "2011 MLB Season", section: 0, attrs: {fill: "#d4e3fd"}},
      {dates: [new Date(2012, 2, 28), new Date(2012, 9, 3)], title: "2012 MLB Regular Season", section: 1, attrs: {fill: "#d4e3fd"}},
      {dates: [new Date(2012, 1, 29), new Date(2012, 3, 4)], title: "Spring Training", section: 2, attrs: {fill: "#eaf0fa"}},
      {dates: [new Date(2012, 9, 4), new Date(2012, 9, 31)], title: "2012 MLB Playoffs", section: 3, attrs: {fill: "#eaf0fa"}}
      ];

      var timeline1 = new Chronoline(document.getElementById("target1"), events,
        {animated: true,
         tooltips: true,
         defaultStartDate: new Date(2012, 3, 5),
         sections: sections,
         sectionLabelAttrs: {'fill': '#997e3d', 'font-weight': 'bold'},
      });

      $('#to-today').click(function(){timeline1.goToToday();});

      var sections2 = [
      {dates: [new Date(2011, 2, 31), new Date(2011, 9, 28)], title: "2011 MLB Season", section: 0, attrs: {fill: "##e3f0fe"}},
      {dates: [new Date(2012, 2, 28), new Date(2012, 9, 3)], title: "2012 MLB Regular Season", section: 1, attrs: {fill: "#e3f0fe"}},
      {dates: [new Date(2012, 1, 29), new Date(2012, 3, 4)], title: "Spring Training", section: 2, attrs: {fill: "#cce5ff"}},
      {dates: [new Date(2012, 9, 4), new Date(2012, 9, 31)], title: "2012 MLB Playoffs", section: 3, attrs: {fill: "#cce5ff"}}
      ];

      var timeline2 = new Chronoline(document.getElementById("target2"), events,
        {visibleSpan: DAY_IN_MILLISECONDS * 91,
         animated: true,
         tooltips: true,
         defaultStartDate: new Date(2012, 3, 5),
         sections: sections2,
         sectionLabelAttrs: {'fill': '#997e3d', 'font-weight': 'bold'},
      labelInterval: isFifthDay,
      hashInterval: isFifthDay,
      scrollLeft: prevMonth,
      scrollRight: nextMonth,
      markToday: 'labelBox',
         draggable: true
      });

      var timeline3 = new Chronoline(document.getElementById("target3"), events,
        {visibleSpan: DAY_IN_MILLISECONDS * 366,
      animated: true,
         tooltips: true,
         defaultStartDate: new Date(2012, 3, 5),
         sections: sections,
         sectionLabelAttrs: {'fill': '#997e3d', 'font-weight': 'bold'},
      labelInterval: isHalfMonth,
      hashInterval: isHalfMonth,
      scrollLeft: prevQuarter,
      scrollRight: nextQuarter,
      floatingSubLabels: false,
      });

      });
    </script>

  </body>
</html>
